<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>ArcGIS地图显示</title>
    <!--引入第三方的jquery脚本库-->
    <script src="./js/jquery-1.11.2.min.js"></script>
    <!--引入mapboxgl原生脚本库-->
    <script src="./js/MapGis_MapBox_product.js"></script>
    <!--引入mapboxgl原生样式表-->
    <link href="./css/MapBox_GL.css" rel="stylesheet" />
    <!--引入当前页面样式表-->
    <link href="./css/style.css" rel="stylesheet" />
    <script>
        //使用严格模式
        "use strict";
        var map ;
        /**地图初始化函数*/
        function init() {
            //实例化要加载的source来源对象（世界道路）
            var streetsrc = {
                //来源类型为栅格瓦片
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求ArcGIS提供的世界道路瓦片地图服务
                    "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.jpg"
                ],
                //栅格瓦片的分辨率
                'tileSize': 256
            };
            //实例化要加载的source来源对象（世界影像）
            var imgsrc = {
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求ArcGIS提供的世界影像瓦片地图服务
                    "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.jpg"
                ],
                'tileSize': 256
            };
            //实例化要加载的source来源对象（世界地形）
            var terrainsrc = {
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求ArcGIS提供的世界地形瓦片地图服务
                    "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}.jpg"
                ],
                'tileSize': 256
            };
            //实例化Map对象加载地图
            map = new mapboxgl.Map({
                //地图容器div的id
                container: 'map',
                //设置地图样式信息
                style: {
                    //设置版本号，一定要设置
                    "version": 8,
                    //添加来源
                    "sources": {
                        "terrainsrc": terrainsrc,
                        "imgsrc": imgsrc,
                        "streetsrc": streetsrc
                    },
                    //设置加载并显示来源的图层信息
                    "layers": [
                         {
                             //图层id，要保证唯一性
                             "id": "terrainsrc",
                             //图层类型
                             "type": "raster",
                             //连接图层来源
                             "source": "terrainsrc",
                             //图层最小缩放级数
                             "minzoom": 0,
                             //图层最大缩放级数
                             "maxzoom": 22
                         },
                         {
                             //图层id，要保证唯一性
                             "id": "imgsrc",
                             //图层类型
                             "type": "raster",
                             //连接图层来源
                             "source": "imgsrc",
                             //图层最小缩放级数
                             "minzoom": 0,
                             //图层最大缩放级数
                             "maxzoom": 22
                         },
                         {
                             //图层id，要保证唯一性
                             "id": "streetsrc",
                             //图层类型
                             "type": "raster",
                             //连接图层来源
                             "source": "streetsrc",
                             //图层最小缩放级数
                             "minzoom": 0,
                             //图层最大缩放级数
                             "maxzoom": 22
                         }
                    ]
                }
            });
        }
        /**图层切换函数*/
        function changeLayer() {
            //获取地图的所有图层
            var Layers = map.getStyle().layers;
            var layerL = Layers.length;
            for (var i = 0; i < layerL; i++) {
                //移除图层
                map.removeLayer(Layers[i].id);
            }
            var src = $("#LayerSelect").val();
            //添加图层
            map.addLayer({
                   "id": src,
                   "type": "raster",
                   //连接图层来源
                   "source": src,
                   "minzoom": 0,
                   "maxzoom": 22
            });
        }
    </script>
</head>
<body onload="init()">
    <div id="menu">
        <label style="font-weight: bold;">切换图层：</label>
        <select name="changeLayer" id="LayerSelect" onchange="changeLayer()">
            <option value="streetsrc">STREET</option>
            <option value="imgsrc">RASTER</option>
            <option value="terrainsrc">TERRAIN </option>
        </select>
    </div>
    <div id='map'>
    </div>
</body>
</html>
